<template>
  <div class="share-stats">
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span>{{ t('share.stats.title') }}</span>
          <el-button :icon="Refresh" circle @click="handleRefresh" />
        </div>
      </template>
      <div class="stats-content">
        <div class="stats-grid">
          <div class="stats-item">
            <div class="item-label">{{ t('share.stats.total') }}</div>
            <div class="item-value">{{ stats?.totalShares || 0 }}</div>
          </div>
          <div class="stats-item">
            <div class="item-label">{{ t('share.stats.todayViews') }}</div>
            <div class="item-value">{{ stats?.todayAccess || 0 }}</div>
          </div>
          <div class="stats-item">
            <div class="item-label">{{ t('share.stats.totalViews') }}</div>
            <div class="item-value">{{ stats?.totalAccess || 0 }}</div>
          </div>
          <div class="stats-item">
            <div class="item-label">{{ t('share.stats.downloadCount') }}</div>
            <div class="item-value">{{ stats?.downloadCount || 0 }}</div>
          </div>
          <div class="stats-item">
            <div class="item-label">{{ t('share.stats.previewCount') }}</div>
            <div class="item-value">{{ stats?.previewCount || 0 }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Refresh } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useShareStore } from '@/stores/shareStore'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const shareStore = useShareStore()
const { stats } = storeToRefs(shareStore)

const handleRefresh = () => {
  shareStore.fetchShareStats()
}
</script>

<style lang="scss">
@import '@/styles/index.scss';

.share-stats {
  width: 280px;
  
  @include respond-to('lg') {
    width: 100%;
  }

  .stats-card {
    height: 100%;

    :deep(.el-card__header) {
      padding: 12px 16px;
    }

    :deep(.el-card__body) {
      padding: 0;
    }
  }

  .card-header {
    @include flex-between;
  }

  .stats-content {
    padding: 16px;

    @include respond-to('lg') {
      padding: 12px;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;

    @include respond-to('lg') {
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }

    @include respond-to('md') {
      grid-template-columns: repeat(2, 1fr);
    }

    @include respond-to('sm') {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .stats-item {
    @include flex-between;

    @include respond-to('lg') {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .item-label {
      color: var(--el-text-color-regular);
      font-size: 14px;
    }

    .item-value {
      color: var(--el-text-color-primary);
      font-size: 16px;
      font-weight: 500;

      @include respond-to('lg') {
        margin-top: 4px;
        font-size: 18px;
      }
    }
  }
}
</style> 